<template>
  <div class="czrz">
    <a-search :change="paginationElement?.change" :list="list" v-model="form"></a-search>
    <a-card resize>
      <a-card>
        <el-button @click="handleExport">导出数据</el-button>
      </a-card>
      <a-table :data="data" :head="head"></a-table>
      <a-pagination ref="paginationElement" :total="total" :change="getTableData"></a-pagination>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { exportData, tableData } from '../../api/rzgl/czrz'
import { getDaterangeValue } from '../../utils/date'

interface CZRZ {
  id: string
  [key: string]: unknown
}

const paginationElement = ref<APaginationInstance | null>()

const type = [
  { label: '新增', value: '新增' },
  { label: '修改', value: '修改' },
  { label: '删除', value: '删除' },
  { label: '授权', value: '授权' },
  { label: '导出', value: '导出' },
  { label: '导入', value: '导入' },
  { label: '强退', value: '强退' },
  { label: '生成代码', value: '生成代码' },
  { label: '清空数据', value: '清空数据' },
  { label: '其他', value: '其他' }
]

const status = [
  { label: '成功', value: '1' },
  { label: '失败', value: '0' }
]

const form = ref<{
  chooseTime?: string | string[]
}>({})
const list = ref<FormItem[]>([
  { prop: 'matterName', 'aria-label': '系统模块啊', type: 'input' },
  { prop: 'matterType', 'aria-label': '操作人员', type: 'input' },
  { prop: 'operateType', 'aria-label': '操作类型', type: 'select', data: type },
  { prop: 'operateState', 'aria-label': '操作状态', type: 'select', data: status },
  { prop: 'chooseTime', 'aria-label': '操作时间', type: 'daterange', 'start-placeholder': '开始日期', 'end-placeholder': '结束日期' }
])

const data = ref<CZRZ[]>([])
const head = ref([
  { prop: 'moduleName', label: '系统模块' },
  { prop: 'operateType', label: '操作类型' },
  { prop: 'operatePerson', label: '操作人' },
  { prop: 'operateIp', label: '操作IP' },
  { prop: 'requestMethod', label: '请求方式' },
  { prop: 'createTime', label: '操作时间' },
  { prop: 'operateStateLabel', label: '操作状态' },
  { prop: 'consumeTime', label: '消耗时间' },
  { prop: 'deptName', label: '所属部门' }
])
const total = ref(0)

function getSearchValue() {
  return {
    ...form.value,
    createStartTime: getDaterangeValue(form.value.chooseTime!, 0),
    createEndTime: getDaterangeValue(form.value.chooseTime!, 1)
  }
}
function getTableData(page: number, row: number) {
  tableData<CZRZ>({
    page,
    row,
    ...getSearchValue()
  }).then(({ data: result }) => {
    data.value = result.result.map((item) => {
      return {
        ...item,
        operateStateLabel: status.find((item2) => item2.value === item.operateState)?.label
      }
    })
    total.value = result.totals
  })
}

function handleExport() {
  exportData({
    ...getSearchValue()
  })
}
</script>
